/**
 * 加法交换率的学习。
 * 
 * 页面内容：
 * 1. 在 #form 中创建一个表单，包含：
 *  - 一个下拉列表，包含指定的模式（由常量 modes 定义）
 *  - 一个输入框，用于输入要生成的题目的组数，默认为 10
 *  - 一个提交按钮，用于提交表单
 * 2. 提交表单后，根据选择的模式生成对应的题目。同时隐藏表单。
 * 3. 生成题目的方法为 generateQuestions(mode, count)，返回一个数组，包含 count 组题目对象，每组的个数由 mode 决定。
 * 4. 题目对象包含以下属性：
 * - a: 加数1
 * - b: 加数2
 * - c: 加数3，可能为空
 * - sum: 和
 * 5. 生成题目后，将题目显示在 #questions 中。每组题目中有多个题目。
 */

// 生成题目的模式
const modes = {
    '几 + 几': '?+?',
    '几 + 十几': '?+1?',
    '十几 + 几': '1?+?',
    '十几 + 十几': '1?+1?',
    '几 + 几 + 几': '?+?+?',
    '几 + 十几 + 几': '?+1?+?',
    '十几 + 几 + 几': '1?+?+?',
    '十几 + 十几 + 几': '1?+1?+?',
};

// 表单容器
const formContainer = document.getElementById('form'); // a div
// 创建表单
const form = document.createElement('form');
formContainer.appendChild(form);

// 创建下拉列表
const select = document.createElement('select');
form.appendChild(select);
for (let key in modes) {
    const option = document.createElement('option');
    option.value = modes[key];
    option.textContent = key;
    select.appendChild(option);
}

// 创建输入框
const input = document.createElement('input');
input.type = 'number';
input.value = 10;
form.appendChild(input);

// 创建提交按钮
const submit = document.createElement('button');
submit.type = 'submit';
submit.textContent = '提交';
form.appendChild(submit);

// 生成题目
// count: 组数
// 每一组中包含两个题目，它们的加数是被交换了的（如果是三个加数，则其中两个被交换了）
function generateQuestions(mode, count) {
    const questions = [];
    for (let i = 0; i < count; i++) {
        const question = {};
        const [a, b, c] = mode.split('+').map(v => {
            if (v[0] === '1') {
                return Math.floor(Math.random() * 10) + 10;
            }
            return Math.floor(Math.random() * 10);
        });
        question.a = a;
        question.b = b;
        question.c = c ? c : 0;
        question.sum = a + b + c;
        questions.push(question);
    }
    console.log(questions);
    return questions;
}
// 题目容器

// 渲染题目
function renderQuestions(quests) {
    const list = document.createElement('ul');
    // no list-style
    list.style.listStyle = 'none';

    quests.forEach(question => {
        const item = document.createElement('li');
        // 如果只有两个加数
        if (question.c === 0) {
            item.textContent = `${question.a} + ${question.b} = `;
        } else {
            item.textContent = `${question.a} + ${question.b} + ${question.c} = `;
        }
        list.appendChild(item);
    });
    document.getElementById('questions').appendChild(list);
}


// 提交表单
form.addEventListener('submit', function (e) {
    e.preventDefault();
    // 隐藏表单
    form.style.display = 'none';
    // 生成题目
    const questions = generateQuestions(select.value, input.value);
    // 渲染题目
    renderQuestions(questions);
});